<template>

    <div class="container">
      <HerinContainer :title="'入场动画1'" />
      <HerinContainer :title="'离场动画1'" />

      <HerinContainer :title="'入场动画2'" />
      <HerinContainer :title="'离场动画2'" />

      <HerinContainer :title="'入场动画3'" />
      <HerinContainer :title="'离场动画3'" />

      <HerinContainer :title="'入场动画4'" />
      <HerinContainer :title="'离场动画4'" />

      <HerinContainer :title="'入场动画5'" />
      <HerinContainer :title="'离场动画5'" />

      <HerinContainer :title="'入场动画6'" />
      <HerinContainer :title="'离场动画6'" />

      <HerinContainer :title="'入场动画7'" />
      <HerinContainer :title="'离场动画7'" />

      <HerinContainer :title="'入场动画8'" />
      <HerinContainer :title="'离场动画8'" />

      <HerinContainer :title="'入场动画9'" />
      <HerinContainer :title="'离场动画9'" />

      <HerinContainer :title="'入场动画10'" />
      <HerinContainer :title="'离场动画10'" />

      <HerinContainer :title="'入场动画11'" />
      <HerinContainer :title="'离场动画11'" />

      <HerinContainer :title="'入场动画12'" />
      <HerinContainer :title="'离场动画12'" />

    </div>

</template>

<script>
import HerinContainer from '@/components/HerinContainer.vue'
export default {
  name: 'homeAnimate',
  components: {
    HerinContainer

  }
}
</script>

<style lang="scss" scoped>
.container {
  position: absolute;
  overflow: hidden;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-gap: 20px;
}
</style>
